<template>
    <div @click="onOff">
        <div :style="isOn?'margin-left: -55%':''" class="door-left">
            <img ondragstart="return false" class="left-img" src="@/assets/left-love-wing.png" />
            <div class="left-triangle"></div>
        </div>

        <div :style="isOn?'margin-right: -55%':''" ref="door-right" class="door-right">
            <img ondragstart="return false" class="right-img" src="@/assets/right-love-wing.png" />
            <div class="right-triangle"></div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isOn:false
        }
    },
    methods: {
        onOff() {
           this.isOn = true
           this.$emit('close')
        }
    }
}
</script>
<style scoped>
    .love-img{
        width: 3rem;
        margin-top: 3rem;
        height: 3rem;
        position: absolute;
        right: -1.5rem;
    }
    .door-left,.door-right{
        width: 50%;
        height: 100%;
        background-color: white;
        background-size: 100% 100%;
        transition: all 2s;
        z-index: 9999;
    }
    .door-left{
        position: fixed;
        top: 0;
        left: 0;
        border-right: 0.02rem solid #000;
    }
    .door-left>img{
        margin-top: 2rem;
        height: 3rem;
        position: absolute;
        right: 0px;
    }
    .door-right{
        position: fixed;
        top: 0;
        right: 0;
        border-right: 0.02rem solid #000;

    }
    .door-right>img{
        margin-top: 2rem;
        height: 3rem;
        position: absolute;
        left: 0px;
    }
</style>